<template>
    <div ref="statsSection" class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-16 py-16">
        <!-- 1200+ 统计 -->
        <Counter :end-value="1200" suffix="+" :triggered="isVisible" :start-delay="0">
            <template #title>
                <span class="text-white font-poppins font-bold tracking-wide">Fashion Items</span>
            </template>
            <p class="text-white/90 text-base font-poppins font-medium tracking-wide text-left">
                Over a thousand fashion items to choose from. From everyday wear to special occasions, our carefully designed clothing allows you to showcase confident, elegant style in any setting.
            </p>
        </Counter>

        <!-- 48 统计 -->
        <Counter :end-value="48" :triggered="isVisible" :start-delay="0">
            <template #title>
                <span class="text-white font-poppins font-bold tracking-wide">Design Team</span>
            </template>
            <p class="text-white/90 text-base font-poppins font-medium tracking-wide text-left">
                A creative team of 48 designers from around the world creates a unique fashion experience for you. We blend international trends with local style to create extraordinary clothing just for you.
            </p>
        </Counter>

        <!-- 200k 统计 -->
        <Counter :end-value="200" suffix=" k" :triggered="isVisible" :start-delay="0">
            <template #title>
                <span class="text-white font-poppins font-bold tracking-wide">Fashion Followers</span>
            </template>
            <p class="text-white/90 text-base font-poppins font-medium tracking-wide text-left">
                Over 200,000 fashion enthusiasts follow our brand, sharing styling inspiration through social media. Join our fashion community to showcase your unique charm!
            </p>
        </Counter>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Counter from '@/components/counter/index.vue';

export default defineComponent({
    name: 'Stats',
    components: {
        Counter
    },
    data() {
        return {
            /*
            * 是否可见
            */
            isVisible: false,
            /*
            * 观察器
            */
            observer: null as IntersectionObserver | null
        };
    },
    mounted() {
        this.observer = new IntersectionObserver(this.handleIntersection, {
            root: null,
            threshold: 0.3, // 当30%的元素可见时触发
        });

        if (this.$refs.statsSection) {
            this.observer.observe(this.$refs.statsSection as HTMLElement);
        }
    },
    beforeUnmount() {
        if (this.observer && this.$refs.statsSection) {
            this.observer.unobserve(this.$refs.statsSection as HTMLElement);
            this.observer = null;
        }
    },
    methods: {
        /*
        * 观察器
        */
        handleIntersection(entries: IntersectionObserverEntry[]) {
            const [entry] = entries;
            if (entry.isIntersecting) {
                this.isVisible = true;
                // 一旦动画触发，就不再需要观察了
                if (this.observer && this.$refs.statsSection) {
                    this.observer.unobserve(this.$refs.statsSection as HTMLElement);
                }
            }
        }
    }
});
</script> 